// 注册选项内容
import React, { useState } from "react"
import { useFormik } from "formik"
import * as Yup from "yup"
import axios from 'axios'
import { 
  Button, 
  Input, 
  InputGroup, 
  InputLeftAddon, 
  Box, 
  Text } from '@chakra-ui/core'
// 导入 react-icons 图标库
import { FaUserAlt, FaLock, FaPhone } from 'react-icons/fa'

export default function SignIn () {
  // 初始化 disabled 绑定在注册按钮表示按钮禁用状态 默认为 false
  const [disabled, setDisabled] = useState(false)
  // 定义 formik 对象  绑定数据与方法
  const formik = useFormik({
    // 初始化昵称、手机号或邮箱、密码 都为空
    initialValues: {
      username: '',
      email: '',
      password: ''
    },
    // 验证对象
    validationSchema: Yup.object({
      username: Yup.string().required('请输入昵称'),
      email: Yup.string().required('请输入手机号'),
      password: Yup.string().min(6, '密码长度不能低于6位').required('请输入密码')
    }),
    // 提交方法
    onSubmit: async values => {
      // 获取昵称、手机号或邮箱、密码
      const {username, email, password} = values
      // 禁用注册按钮
      setDisabled(true)
      // 请求接口
      try {
        await axios.post('https://conduit.productionready.io/users', {
          user: {
            username,
            email,
            password
          }
        })
      } catch (error) {
        console.log(error)
      } finally {
        setDisabled(false)
      }
    }
  })
  return <form onSubmit={formik.handleSubmit}>
    <Box p="0" mb="30px">
      <InputGroup>
        <InputLeftAddon bgColor="#f1f1f1" children={<FaUserAlt color="#969696" />} />
        {/* 昵称输入框 绑定 username */}
        <Input 
          name="username"
          {...formik.getFieldProps('username')}
          h="50px" 
          pl="none" 
          fontSize="14px" 
          borderLeft="none" 
          placeholder="你的昵称" 
          bgColor="#f1f1f1" 
          color="black" 
          _focus={{boxShadow: 'none'}}
        />
      </InputGroup>
      {/* 昵称输入框错误提示 */}
      <Text fontSize="12px" color="red.300">
        { formik.touched.username && formik.errors.username ? formik.errors.username : null }
      </Text>
      <InputGroup>
        <InputLeftAddon bgColor="#f1f1f1" children={<FaPhone color="#969696" />} />
        {/* 手机号或邮箱输入框 绑定 email */}
        <Input 
          name="email"
          {...formik.getFieldProps('email')}
          h="50px" 
          pl="none" 
          fontSize="14px" 
          borderLeft="none" 
          placeholder="手机号" 
          bgColor="#f1f1f1" 
          color="black" 
          _focus={{boxShadow: 'none'}}
        />
      </InputGroup>
      {/* 手机号或邮箱输入框错误提示 */}
      <Text fontSize="12px" color="red.300">
        { formik.touched.email && formik.errors.email ? formik.errors.email : null }
      </Text>
      <InputGroup>
        <InputLeftAddon bgColor="#f1f1f1" children={<FaLock color="#969696" />} />
        {/* 密码输入框 绑定 password */}
        <Input 
          name="password"
          {...formik.getFieldProps('password')}
          h="50px" 
          pl="none" 
          fontSize="14px" 
          borderLeft="none" 
          placeholder="设置密码" 
          type="password" 
          bgColor="#f1f1f1" 
          color="black" 
          _focus={{boxShadow: 'none'}}
        />
      </InputGroup>
      {/* 密码输入框错误提示 */}
      <Text fontSize="12px" color="red.300">
        { formik.touched.password && formik.errors.password ? formik.errors.password : null }
      </Text>
      {/* 注册按钮 绑定 disabled 表示是否禁用 */}
      <Button 
        disabled={disabled}
        type="submit"
        mt="20px" 
        bgColor="#42c02e" 
        color="white" 
        _hover={{bgColor: "#3fb52d"}} 
        fontSize="18px" 
        fontWeight="400" 
        w="100%" 
        borderRadius="20px"
      >注册</Button>
      <Box my="10px">
        <Text lineHeight="20px" fontSize="12px" color="#969696" textAlign="center">
          点击 “注册” 即表示您同意并愿意遵守简书
        </Text>
        <Text lineHeight="20px" fontSize="12px" color="#969696" textAlign="center">
          <Text as="a" color="#3194d0">用户协议</Text> 和 <Text as="a" color="#3194d0">隐私政策</Text> 。
        </Text>
      </Box>
    </Box>
  </form>
}